<template>
	<view class="box">
		<view class="header">
			<view class="top">
				<view class="searchBox">
					<view class="search">
						<image src="../../static/img/healthTeam/searchIcon@2x.png" class="searchIcon"></image>
						<input type="text" v-model="healthStr" placeholder="姓名/手机号/编号">
						<text class="placeholder">|</text>
						<image src="../../static/img/healthTeam/scan@2x.png" class="scan"></image>
					</view>
					<text @click="search">搜索</text>
				</view>
				<view class="tabSwitch">
					<view :class="showExperts==1? 'on': ''" @click="[showExperts = 1,list= [],getlist({pageSize:10,pageIndex:1,healthRank:1},nullData=false,page=1)]">健康管理师</view>
					<view :class="showExperts==2? 'on': ''" @click="[showExperts = 2,list= [],getlist({pageSize:10,pageIndex:1,healthRank:2},nullData=false,page=1)]">健康专家</view>
				</view>
			</view>
			<view class="bottom">
				<u-dropdown>
					<u-dropdown-item v-model="value1" :title="title1" :options="options1" @change="change"></u-dropdown-item>
					<u-dropdown-item v-model="value2" :title="title2" :options="options2" @change="change1"></u-dropdown-item>
					<u-dropdown-item v-model="value3" :title="title3" :options="options3" @change="change2"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		
		<view class="mainContent">
			<view class="item" v-for="(item,index) in list">
				<image :src="item.headPicture && item.headPicture || '../../static/img/default_tx.png'" @click="jump(item)"></image>
				<view class="center" @click="jump(item)">
					<view class="name">{{item.realName}}</view>
					<view style="font-size:26rpx;margin-bottom: 10rpx;">{{item.department}}</view>
					<view>
						<u-tag  v-for="(a,ai) in item.labelName" :key="ai" :text="a" size="mini" style="margin: 0 12upx 10upx 0;" border-color="#ffffff" 
						:bg-color="ai%5 == 1 ? '#ecf5ff' : ai%5 == 2 ? '#fdf6ec' : ai%5 == 3 ? '#fcf4ff' : ai%5 == 4 ? '#ecfaed' : '#fef0f0'" 
						:color="ai%5 == 1 ? '#2979ff' : ai%5 == 2 ? '#ff9900' : ai%5 == 3 ? '#b000ff' : ai%5 == 4 ? '#00b100' : '#fa3534'"></u-tag>
					</view>
				</view>
				<view class="right">
					<view class="start">
						<image src="../../static/img/healthTeam/pingfen.png"></image>
						<image src="../../static/img/healthTeam/pingfen.png"></image>
						<image src="../../static/img/healthTeam/pingfen.png"></image>
						<image src="../../static/img/healthTeam/pingfen.png"></image>
						<image src="../../static/img/healthTeam/pingfen.png"></image>
					</view>
					<view :class="['status',!item.status?'tags':'']">
						<image v-if="!item.status" src="../../static/img/healthTeam/attention@2x.png" class="attention"></image>
						<image v-if="item.status == 1" src="../../static/img/healthTeam/hasBeen@2x.png" class="hasBeen"></image>
						<image v-if="item.status == 3"src="../../static/img/healthTeam/eachOther@2x.png" class="eachOther"></image>
						<text v-if="!item.status" @click="addHealth(item)">关注</text>
						<text v-else-if="item.status == 1" @click="cancelHealth(item)">已关注</text>
						<text v-else-if="item.status == 3" @click="cancelHealth(item)">互相关注</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showExperts: 1,
				value1: '',
				value2: '',
				value3: '',
				title1: '全部',
				title2: '全部',
				title3: '全部',
				healthStr:'',
				options1: [
					{ label: '全部', value:''},
					{ label: '已关注', value:'followed'},
					{ label: '未关注', value: 'notAttention'},
					{ label: '互相关注', value: 'interrelation'},
				],
				options2: [
					{ label: '全部', value:''},
				],
				options3: [
					{ label: '全部', value:''},
					{ label: '关注度降序', value: 1 },
					{ label: '服务人次降序', value: 2 },
				],
				list:[],
				typeArr:['success','warning'],
				page: 1,
				nullData:false,
				searchArr: '',
				status:'', //关注状态
				labelId:'', //管理类型状态
				type: '', //服务类型状态
			}
		},
		onLoad(){
			this.getlist({pageSize:10,pageIndex:1,healthRank:1})
			this.getDataDictfindByType()
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
			if(this.nullData){
				return;
			}
			this.page = this.page + 1
			this.getlist({pageSize:10,pageIndex:this.page,healthRank:this.showExperts})
		},
		watch: {
			name(newValue, oldValue) {
				console.log("name",newValue,oldValue)
			}
		},
		methods: {
			// 获取擅长配置
			getDataDictfindByType(){
				this.$api.DataDictfindByType({type:'labelConfiguration'}).then((res)=>{
					const result = res.data.result && res.data.result.map((a)=>{
						return { label : a.valuex , value : a.id }
					})
					this.options2 = this.options2.concat(result)
				})
			},
			getlist(data){
				// this.list = []
				this.$api.UserHealth(data).then((res)=>{
					if(this.searchArr == 1) {
						this.list = []
						this.list = res.data.result && res.data.result.list;
						this.searchArr = ''
					}else {
						this.list = this.list.concat(res.data.result && res.data.result.list)
					}
					
					// this.totalCount = res.data.result && res.data.result.totalCount
					if(this.list.length >= res.data.result.totalCount){
						this.nullData = true;
					}
				})
			},
			change(e) {
				this.status = e;
				const data = {
					status: e,
					labelId: this.labelId ? this.labelId : '',
					type: this.type,
					healthRank: this.showExperts,
					pageIndex:1,
					pageSize:10
				}
				if(!data.status) {
					delete data.status
				}
				if(!data.labelId) {
					delete data.labelId
				}
				if(!data.type) {
					delete data.type
				}
				var res = this.options1.filter(a=>{return a.value == e})
				if(res[0].label != '全部') {
					this.value1 = e,this.title1 = res[0].label,this.list = [],this.getlist(data)
				} else {
					this.value1 = '',this.title1 = res[0].label,this.list = [],this.getlist(data)
				}
				// res.length > 0 ?
				// 	[this.value1 = e,this.title1 = res[0].label,this.list = [],this.getlist({status:e,labelId:this.labelId,type:this.type,healthRank:this.showExperts,pageIndex:1,pageSize:10})]
				// :
				// 	[this.value1 = '',this.title1 = '',this.list = [],this.getlist({status:e,labelId:this.labelId,type:this.type,healthRank:this.showExperts,pageIndex:1,pageSize:10})]
			},
			change1(e) {
				this.labelId  = e;
				const data = {
					status: this.status,
					labelId: e,
					type: this.type,
					healthRank: this.showExperts,
					pageIndex:1,
					pageSize:10
				}
				if(!data.status) {
					delete data.status
				}
				if(!data.labelId) {
					delete data.labelId
				}
				if(!data.type) {
					delete data.type
				}
				var res = this.options2.filter(a=>{return a.value == e})		
				if(res[0].label != '全部') {
					this.value2 = e,this.title2 = res[0].label,this.list = [],this.getlist(data)
				}else {
					this.value2 = '',this.title2 = res[0].label,this.list = [],this.getlist(data)
				}
				
			},
			change2(e) {
				this.type = e;
				const data = {
					status: this.status,
					labelId: this.labelId,
					type: e,
					healthRank: this.showExperts,
					pageIndex:1,
					pageSize:10
				}
				if(!data.status) {
					delete data.status
				}
				if(!data.labelId) {
					delete data.labelId
				}
				if(!data.type) {
					delete data.type
				}
				var res = this.options3.filter(a=>{return a.value == e})
				if(res[0].label != '全部') {
					this.value3 = e,this.title3 = res[0].label,this.list = [],this.getlist(data)
				}else {
					this.value3 = '',this.title3 = res[0].label,this.list = [],this.getlist(data)
				}
			},
			search(){
				const _this = this;
				_this.searchArr = 1
				_this.getlist({healthStr:_this.healthStr,healthRank:this.showExperts,pageIndex:1,pageSize:10})
			},
			// 关注
			addHealth(e){
				const _this = this;
				_this.$api.addHealth({healthId:e.id,healthNumber:e.healthNumber}).then((res)=>{
					if(res.data.returnCode == 200){
						// window.location.reload();
						_this.list = []
						_this.getlist({healthRank:_this.showExperts,pageIndex:1,pageSize:10})
					}
				})
			},
			cancelHealth(e){
				const _this = this;
				_this.$api.cancelHealth(e.uhId).then((res)=>{
					if(res.data.returnCode == 200){
						// window.location.reload();
						_this.list = []
						_this.getlist({healthRank:_this.showExperts,pageIndex:1,pageSize:10})
					}
				})
			},
			jump(e){
				uni.navigateTo({
					url:'/pages/healthTeam/personalPage?id='+e.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750upx;
		min-height: calc(100vh - 44px);
		background-color: #F8F8F8;
		.header {
			position: fixed;
			top: 44px;
			left: 0;
			z-index: 10;
			width: 750upx;
			// height: 100%;
			.top {
				background-color: #38CB97;
				height: 209upx;
				width: 750upx;
				.searchBox {
					display: flex;
					margin: 0 24upx;
					padding-top: 43upx;
					display: flex;
					align-items: center;
					.search {
						flex: 1;
						background-color: #FFFFFF;
						height: 54upx;
						line-height: 54upx;
						border-radius: 27upx;
						position: relative;
						.searchIcon{
							position: absolute;
							width: 32upx;
							height: 32upx;
							left: 18upx;
							top: 50%;
							transform: translateY(-50%);
						}
						.scan {
							position: absolute;
							width: 32upx;
							height: 32upx;
							right: 24upx;
							top: 50%;
							transform: translateY(-50%);
						}
						.placeholder {
							position: absolute;
							right: 78upx;
							top: 0;
							color: #D0D0D0;
						}
						input {
							color: #333333;
							font-size: 22upx;
							margin-left: 64upx;
							height: 100%;
						}
					}
					text {
						color: #FFFFFF;
						font-size: 28upx;
						margin-left: 28upx;
					}
				}
				.tabSwitch {
					display: flex;
					margin-top: 35upx;
					justify-content: space-around;
					view {
						color: #FFFFFF;
						font-size: 32upx;
					}
					.on {
						font-size: 36upx;
					}
					.on::after {
						content: '';
						display: block;
						width: 76upx;
						height: 4upx;
						background: #FFFFFF;
						border-radius: 2upx;
						margin: 13upx auto 0;

					}
				}
			}
			.bottom {
				height: 87upx;
				background-color: #FFFFFF;
				width: 750upx;
				box-shadow: 0px 1upx 27upx 0px rgba(232, 232, 232, 0.55);
				border-radius: 18upx;
				/deep/ .u-icon__icon.uicon-arrow-down.u-iconfont {
					font-size: 5px;
					font-weight: normal;
					top: 2px;
					color: rgb(192, 196, 204);
				}
				/deep/ .u-dropdown__content{
					overflow: unset;
					height: unset !important;
				}
			}
		}
		.mainContent {
			margin: 296upx 24upx 0;
			padding-top: 24upx;
			.item {
				display: flex;
				width: 702upx;
				min-height: 235upx;
				background: #FFFFFF;
				box-shadow: 0px 1upx 12upx 0px rgba(235, 235, 235, 0.55);
				border-radius: 10upx;
				margin-bottom: 24upx;
				image {
					width: 122upx;
					height: 156upx;
					border-radius: 6upx;
				}
				padding: 35upx 24upx;
				box-sizing: border-box;
				.center {
					width: 334upx;
					margin: 0 24upx;
					.name {
						color: #333333;
						font-size: 34upx;
						margin-bottom: 10upx;
					}
				}
				.right {
					.start {
						image {
							width: 24upx;
							height: 22upx;
							margin-right: 6upx;
						}
					}
					.status,.tags {
						margin-top: 28upx;					
						height: 44upx;
						border: 1upx solid #CCCCCC;
						border-radius: 22upx;
						text-align: center;
						.eachOther {
							width: 22upx;
							height: 18upx;
							margin: 0 4upx;
						}
						.hasBeen {
							width: 16upx;
							height: 16upx;
							margin: 0 8upx;
						}
						.attention {
							width: 20upx;
							height: 20upx;
							margin: 0 8upx;
						}
						text {
							color: #666666;
							font-size: 22upx;
						}
					}
					.tags {
						border: 1upx solid #3CBE8A;
						text {
							color: #3CBE8A;
						}
					}
				}
			}
		}		
	}
	/deep/ .u-cell {
		padding: 13px 80upx;
	}
</style>
